<template>
	<div class="sidebar_box">
		<!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
			<el-radio-button :label="false">展开</el-radio-button>
			<el-radio-button :label="true">收起</el-radio-button>
		</el-radio-group> -->
		<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
			<el-submenu index="1">
				<template slot="title">
					<i class="el-icon-location"></i>
					<span slot="title">导航一</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="1-1" @click="tz()">page1</el-menu-item>
					<el-menu-item index="1-2" @click="tz(2)">page2</el-menu-item>
					<el-menu-item index="1-3" @click="tz(3)">page3</el-menu-item>
					<el-menu-item index="1-4" @click="tz(4)">page4</el-menu-item>
					<el-menu-item index="1-5" @click="tz(5)">page5</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
		</el-menu>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				isCollapse: false
			};
		},
		computed:{
			...mapState(['cebian']),
		},
		watch:{
			cebian:function(){
				console.log(this.cebian)
				if(this.cebian){
					this.isCollapse = true
				}else{
					this.isCollapse = false
				}
			}
		},
		methods: {
			tz:function(e) {
				if(e == undefined){
					this.$router.push({path:'/'})
					return
				}else{
					let url = '/page' + e
					this.$router.push({path:url})
				}
				
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	};
</script>

<style>
	.sidebar_head {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		height: 100%;
	}
	.sidebar_box{
		height: calc(100vh - 61px);
		position: absolute;
		left: 0;
		top: 60px;
		background: #FFFFFF;
		z-index: 1000;
	}
	
</style>
